<template>
	<text v-if="type == 'fraction'" class="l-swiper-dot" :class="'l-swiper-dot__' + type" :style="[styles]">
		{{currentIndex}}/{{totalSlides}}
	</text>
	<text v-else-if="type == 'title'" class="l-swiper-dot" :class="'l-swiper-dot__' + type" :style="[styles]">
		{{currentIndex}}/{{totalSlides}}
		{{currentSlideTitle}}
	</text>
	<view v-else class="l-swiper-dot" :class="'l-swiper-dot__' + type">
		<text
			class="l-swiper-dot__item" 
			:class="{
				'l-swiper-dot__item--active': index == current
			}"
			:style="[styles,  index == current && activeColor ? { 
				'background': activeColor
			}: {}]"
			v-for="(_, index) in totalSlides" :key="index">
			<template v-if="type == 'index'">
				{{ index + 1}}
			</template>
		</text>
	</view>
</template>
<script lang="ts">
	// @ts-nocheck
	import { computed, defineComponent } from '@/uni_modules/lime-shared/vue';
	import swiperDotProps from './props';
	
	export default defineComponent({
		props: swiperDotProps,
		setup(props) {
			const totalSlides = computed(():number => props.list?.length ?? props.total);
			const currentIndex = computed(():number => props.current + 1);
			const currentSlideTitle = computed(():string => {
				if(!props.list || props.list!.length <= props.current) return ''
				const slide = props.list[props.current]
				if(typeof slide == 'string') return `${slide}`
				if(typeof slide == 'object') {
					const fieldValue = slide[props.field]
					if(!fieldValue) return ''
					 return `${fieldValue}`
				}
				return ''
			}); 
			
			const styles = computed(()=>{
				const style:Record<string, any> = {}
				
				if(props.color) {
					style['color'] = props.color!
				}
				if(props.inactiveColor) {
					style['background'] = props.inactiveColor!
				}
				if(props.fontSize) {
					style['font-size'] = props.fontSize!
				}
				return style
			})
			
			
			return {
				totalSlides,
				currentIndex,
				currentSlideTitle,
				styles
			}
		}
	})
	
</script>
<style lang="scss">
	@import './index';
</style>
